<template>
  <PageWrapper content-full-height fixed-height dense>
    <AdVxeTable @register="registerTable">
      <template #tools>
        <Authority value="Root.IoT.Admin.Gateway.Create">
          <a-button type="primary" @click="handleCreate">
            <Icon icon="ant-design:plus-circle-outlined" />{{ t('common.addText') }}
          </a-button>
        </Authority>
      </template>

      <template #actionCol="{ row }">
        <TableAction
          outside
          :actions="[
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: t('common.delText'),
              auth: 'Root.IoT.Admin.Gateway.Delete', // 权限控制
              // ifShow: (_action) => {
              //   return row.Deletable === true; // 根据业务控制是否显示: 是否可删除的数据权限状态
              // },
              popConfirm: {
                title: t('common.delConfirmText'),
                placement: 'left',
                confirm: handleDelete.bind(null, row),
              },
            },
          ]"
          :drop-down-actions="[
            {
              icon: 'clarity:details-line',
              label: t('common.detailText'),
              onClick: handleView.bind(null, row),
            },
            {
              icon: 'clarity:note-edit-line',
              label: t('common.editText'),
              auth: 'Root.IoT.Admin.Gateway.Update', // 权限控制
              // ifShow: (_action) => {
              //   return row.Updatable === true; // 根据业务控制是否显示: 是否可更新的数据权限状态
              // },
              onClick: handleEdit.bind(null, row),
            },
          ]"
        />
      </template>
    </AdVxeTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { createGateway, deleteGateway, readGateway, updateGateway } from '@/api/iot/admin/gateway';
  import { AdVxeTable, TableAction, useAdVxeTable } from '@/components/AdVxeTable';
  import { Authority } from '@/components/Authority';
  import Icon from '@/components/Icon/Icon.vue';
  import { PageWrapper } from '@/components/Page';
  import { FormModeEnum } from '@/enums/formEnum';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useMessage } from '@/hooks/web/useMessage';

  import { columns } from './gateway.data';

  defineOptions({ name: 'GatewaySettingPage' });

  const { t } = useI18n();
  const { createMessage } = useMessage();

  const [registerTable, { openDetailForm, reload }] = useAdVxeTable({
    id: 'iot-gateway-setting-page-table',
    // 表标题呈现器
    title: t('iot.route.gateway.setting.gatewayList'),
    // 表格数据接口请求对象
    api: readGateway,
    // 详情表单
    detailForm: {
      // 表单标识
      formIndex: 'iot_gateway_detail',
      // 主键字段
      keyField: 'Id',
      // 详情表单抬头
      title: t('iot.route.gateway.setting.title'),
      // 实体新增接口请求对象
      createApi: createGateway,
      // 实体更新接口请求对象
      updateApi: updateGateway,
    },
    // 表单列信息 BasicColumn[]
    columns,
    // 使用搜索表单
    searchForm: true,
    // 是否带有边框 boolean | default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
    border: false,
    // 是否显示序号列
    showSeqColumn: true,
    // 表格右侧操作列配置 BasicColumn
    actionColumn: {
      width: 80,
      title: t('common.actionText'),
      fixed: 'right',
      slots: { default: 'actionCol' },
    },
  });

  /** 处理创建 */
  async function handleCreate() {
    openDetailForm(FormModeEnum.Add);
  }
  /** 处理查看 */
  async function handleView(record: any) {
    openDetailForm(FormModeEnum.ReadOnly, record);
  }
  /** 处理编辑 */
  async function handleEdit(record: any) {
    openDetailForm(FormModeEnum.Edit, record);
  }
  /** 处理删除 */
  async function handleDelete(record: any) {
    // console.log(record);
    const result = await deleteGateway([record.Id]);
    if (result.Succeeded) {
      createMessage.success(t('common.successText'));
      reload();
    }
  }
</script>
